<template>
  <div
    v-if="!loading"
    class="vc-block-list"
    :style="visual.parseStyle(compStyle)"
  >
    <div
      v-for="(data, index) in dataList"
      :key="index"
      class="vc-block-list-item"
    >
      <div
        class="vc-block-list-item-title"
        :style="getTitleStyle()"
      >{{data["标题"]}}</div>
      <div
        class="vc-block-list-item-content"
        :style="getContentStyle()"
      >{{data["内容"]}}</div>
      <div
        v-if="currNode.currStyle && currNode.currStyle.subtitleList && currNode.currStyle.subtitleList.length > 0"
        class="vc-block-list-item-subtitle"
        :style="getSubtitleStyle()"
      >
        <div
          class="vc-block-list-item-subtitle-item"
          v-for="(subtitle, index2) in currNode.currStyle.subtitleList"
          :key="index2"
        >
          <div class="vc-block-list-item-subtitle-item-field">{{subtitle.name}}：</div>
          <div class="vc-block-list-item-subtitle-item-value">{{data[subtitle.value] || ''}}</div>
        </div>
      </div>
    </div>
    <div
      v-if="!dataList || dataList.length === 0"
      class="vc-block-list"
      :style="visual.parseStyle(compStyle)"
    >
      <div class="vc-block-list-empty">
        <img src="@/assets/images/no-data.png" style="width: 100px" alt />
        <span style="margin-top: 20px;">暂无数据</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch, nextTick } from 'vue';
import visual from "@/visual/js/visual";

const props = defineProps({
  node: Object,
  compStyle: Object,
  compData: Object
});
const currNode = ref(props.node);
const dataList = ref([]);
const loading = ref(true);

const init = async() => {
  loading.value = true;
  if (currNode.value.compData.dataSourceType === '') {
    currNode.value.compData.dataSourceType = '静态数据';
  }
  await nextTick(() => loading.value = false);
};

const loadData = async() => {
  dataList.value = (await visual.loadData(props.compData, {}, {}) || {}).data || [];
  currNode.value.compData.dataList = JSON.stringify(dataList.value);
};

const getTitleStyle = () => {
  const compStyle = props.compStyle || {};
  return visual.parseFontStyle(compStyle, '', 'title.');
};

const getContentStyle = () => {
  const compStyle = props.compStyle || {};
  let result = visual.parseFontStyle(compStyle, '', 'content.');
  if (compStyle && compStyle['value.show'] === false) {
    result += "display: none!important;";
  }
  return result;
};

const getSubtitleStyle = () => {
  const compStyle = props.compStyle || {};
  return visual.parseFontStyle(compStyle, '', 'subtitle.');
};

watch(() => props.node, (val) => {
  currNode.value = val;
}, {immediate: true});

watch(() => props.compStyle, () => {
  init();
}, { deep: true, immediate: true });

watch(() => props.node.compData?.refresh, () => {
  loadData();
}, {immediate: true});
</script>

<style scoped lang="scss">
.vc-block-list {
  width: 100%;
  .vc-block-list-empty {
    width: 100%;
    padding: 50px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}
.vc-block-list-item {
  width: 100%;
  padding: 15px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.vc-block-list .vc-block-list-item:last-child {
  border-bottom: none!important;
}
.vc-block-list-item-title {
  padding: 15px 0;
}
.vc-block-list-item-content {
  padding: 8px 0;
}
.vc-block-list-item-subtitle {
  padding: 8px 0;
}
.vc-block-list-item-subtitle-item,
.vc-block-list-item-subtitle-item-field,
.vc-block-list-item-subtitle-item-value {
  font-size: inherit;
}
.vc-block-list-item-subtitle {
  display: flex;
  flex-direction: row;
  width: 100%;
  .vc-block-list-item-subtitle-item {
    display: flex;
    flex-direction: row;
    margin-right: 8px;
    width: 100%;
    .vc-block-list-item-subtitle-item-field {
      flex-shrink: 1;
    }
    .vc-block-list-item-subtitle-item-value {
      width: 1px;
      flex-grow: 1;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}
</style>